<script setup lang="ts">
import {useRoute} from "vue-router";
import useMemberStore from "@/pinia/memberStore.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, Ref, ref} from "vue";
import {storeToRefs} from "pinia";
import qrcode from "qrcode"

const route = useRoute()
const memberStore = useMemberStore()
const {orderInfo} = storeToRefs(memberStore)
const loading = ref(true)
const dialogVisible = ref(false)
const fetchOrderInfo = async () => {
  try {
    await memberStore.fetchOrderInfo(route.query.orderId as string)
  } catch (error: any) {
    ElMessage.error(error.message)
  } finally {
    loading.value = false
  }
}
const handleCancel = async () => {
  const confirm = await ElMessageBox.confirm('确定要取消预约吗?', '警告').catch(error => error)
  if (confirm === "cancel") return
  try {
    const result = await memberStore.cancelOrder(route.query.orderId as string)
    await fetchOrderInfo()
    ElMessage.success(result)
  } catch (error: any) {
    ElMessage.error(error.message)
  }
}

const imgUrl: Ref<string> = ref<string>("")
const payStatus: Ref<boolean> = ref<boolean>(false)
let timeId: string = ""
const handleSubmit = async () => {
  try {
    dialogVisible.value = true
    const result = await memberStore.createNative(route.query.orderId as string)
    const codeUrl: string = await qrcode.toDataURL(result.codeUrl)
    imgUrl.value = codeUrl
    timeId = setInterval(async () => {
      const payStatus: boolean = await memberStore.queryPayStatus(route.query.orderId as string)
      if (payStatus) {
        clearInterval(timeId)
        dialogVisible.value = false
        await memberStore.fetchOrderInfo(route.query.orderId as string)
        ElMessage.success("支付成功")
      }
    }, 2000)

  } catch (error) {
    ElMessage.error(error.message)
  }
}
const handleClose = () => {
  clearInterval(timeId)
}

onMounted(() => {
  fetchOrderInfo()
})
</script>

<template>
  <div class="orderDetail" v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgb(255, 255, 255)">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-link type="primary">挂号详情</el-link>
        </div>
      </template>
      <div class="body">
        <div class="left-success">
          <el-tag effect="dark" type="success">√ {{ orderInfo?.param?.orderStatusString }}</el-tag>
        </div>
        <div class="code">
          <img src="@/assets/images/code_app.png" alt="">
          <p>微信关注"北京114预约挂号快速挂号享受优惠"</p>
        </div>
      </div>
      <template #footer>
        <div class="detail">
          <el-card shadow="never">
            <el-descriptions :column="1" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">就诊人信息</div>
                </template>
                {{ orderInfo.patientName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">就诊医院</div>
                </template>
                {{ orderInfo.hosname }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">就诊日期</div>
                </template>
                {{ orderInfo.reserveDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">就诊科室</div>
                </template>
                {{ orderInfo.depname }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">医生职称</div>
                </template>
                {{ orderInfo.title }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">服务费</div>
                </template>
                {{ orderInfo.amount }}(人民币)
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">挂号单号</div>
                </template>
                {{ orderInfo.outTradeNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">挂号时间</div>
                </template>
                {{ orderInfo.createTime }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
        <div class="info">
          <el-card shadow="never">
            <template #header>
              <span>注意事项</span>
            </template>
            <ol>
              <li>1:请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</li>
              <li>2:[取号]就诊当天需在{{ orderInfo.fetchTime }}前在医院取号，未取号视为爽约，该号不退不换；</li>
              <li>3:[退号]在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；</li>
              <li>4:北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</li>
              <li>5:请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</li>
            </ol>
          </el-card>
        </div>
      </template>
    </el-card>
    <div class="btn-box" v-if="orderInfo.orderStatus===0||orderInfo.orderStatus===1">
      <el-button type="danger" @click="handleCancel">取消预约</el-button>
      <el-button type="primary" v-if="orderInfo.orderStatus===0" @click="handleSubmit">支付</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="微信支付" width="20%" :close-on-click-modal="false" center @close="handleClose">
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.orderDetail {
  .body {
    display: flex;
    justify-content: space-between;

    .left-success {
      display: flex;
      align-items: center;
    }

    .code {
      display: flex;
      align-items: center;

      img {
        width: 30px;
      }

      p {
        width: 150px;
        font-size: 12px;
        color: #7f7f7f7f;
        margin-left: 5px;
      }
    }
  }

  :deep(.el-card__footer) {
    display: flex;
    justify-content: space-between;

    .detail {
      flex: 5;
    }

    .info {
      flex: 5;

      ol {
        li {
          line-height: 30px;
          font-size: 13px;
          color: #7f7f7f;

          &:last-child {
            color: red;
          }
        }
      }
    }
  }

  .btn-box {
    text-align: center;
    margin-top: 20px;
  }

  :deep(.el-dialog__body) {
    display: flex;
    justify-content: center;

    img {
      width: 300px;
    }
  }

  :deep(.el-dialog__footer) {
    display: flex;
    justify-content: center;
  }
}
</style>
